<template>
  <div class="head-box">
    <el-row class="head-row">
      <el-col :span="5" class="head-title">
        <el-icon :size="20">
          <CaretLeft />
        </el-icon>
        <h2 class="title">社区管理系统</h2>
      </el-col>
      <el-col :span="12" class="mtext">
        <marquee behavior="" direction=""> 欢迎访问小小社区系统 </marquee>
      </el-col>
      <el-col class="head-user" :span="7" v-if="userInfo">
        <el-tag
          effect="bark"
          class="myrole"
          :color="roleList.find((item) => item.value == userInfo.role).color"
          >{{ roleList.find((item) => item.value == userInfo.role).text }}
        </el-tag>

        <el-tooltip class="avatar" content="更换头像" placement="bottom">
          <Avatar></Avatar>
        </el-tooltip>
        <el-dropdown @command="handleCommand">
          <span class="head-info"
            >{{ userInfo.username }}
            <el-icon :size="15" style="margin-left: 4px">
              <ArrowDown></ArrowDown>
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="home">首页</el-dropdown-item>
              <el-dropdown-item command="info">个人中心</el-dropdown-item>
              <el-dropdown-item command="changepass">修改密码</el-dropdown-item>
              <el-dropdown-item command="message">我的消息</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-tooltip content="注销登录" placement="bottom">
          <el-button type="danger" @click="logoutAction">注销</el-button>
        </el-tooltip>
      </el-col>
    </el-row>
    <el-dialog v-model="show" :title="'修改密码'">
      <el-form :model="form" :rules="rules" ref="nform">
        <el-form-item label="旧密码" prop="oldpass">
          <el-input
            v-model="form.oldpass"
            show-password
            :prefix-icon="Lock"
            type="password"
            autocomplete="off"
            placeholder="请输入旧密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpass">
          <el-input
            v-model="form.newpass"
            show-password
            :prefix-icon="Lock"
            type="password"
            autocomplete="off"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="show = false">取消</el-button>
          <el-button type="primary" @click="confirmchange">确认修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  ArrowLeftBold,
  CaretLeft,
  CaretRight,
  ArrowDown,
} from "@element-plus/icons";
import { reactive, toRefs, computed, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import { roleList, toast } from "@/utils";
import Avatar from "./Avatar.vue";
import { reg } from "@/utils/validate";
import { ajax } from "@/api";

export default {
  components: {
    ArrowLeftBold,
    CaretLeft,
    CaretRight,
    ArrowDown,
    Avatar,
  },
  setup() {
    const nform = ref();
    const store = useStore();
    const router = useRouter();
    const userInfo = computed(() => {
      return store.state.userInfo;
    });
    const state = reactive({
      roleList,
      show: false,
      form: {},
      rules: {
        oldpass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            pattern: reg.pwd,
            trigger: "blur",
            message: "请输入6-16的数字字母密码组合",
          },
        ],
        newpass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            pattern: reg.pwd,
            trigger: "blur",
            message: "请输入6-16的数字字母密码组合",
          },
        ],
      },
    });

    const logoutAction = () => {
      ElMessageBox.confirm("你真的要退出登录吗?", "退出警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sessionStorage.removeItem("token");
          store.commit("changeUserInfomu", null);
          router.push({ name: "login" });
        })
        .catch(() => {});
    };

    const handleCommand = (command) => {
      // console.log(command);
      if (command == "changepass") {
        state.show = true;
      } else {
        router.push({ name: command });
      }
    };
    const confirmchange = () => {
      nform.value.validate(async (valid) => {
        if (valid) {
          let { code, result } = await ajax.changepass(state.form);
          if (code == 200) {
            state.show = false;
            sessionStorage.removeItem("token");
            store.commit("changeUserInfomu", null);
            router.push({ name: "login" });
          }
        } else {
          toast.error("请输入正确的密码");
        }
      });
    };

    return {
      ...toRefs(state),
      userInfo,
      logoutAction,
      handleCommand,
      confirmchange,
      nform,
    };
  },
};
</script>

<style lang="scss" scoped>
.head-box {
  height: 100%;
  .head-row {
    height: 100%;
    display: flex;
    align-items: center;
    .head-title {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #000;
      .head-icon {
        font-size: 20px;
        font-weight: bold;
      }
      .title {
        font-size: 18px;
        color: crimson;
      }
    }
    .mtext {
      padding: 0 20px;
      color: orange;
    }
    .head-user {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 10px;
      .myrole {
        color: #fff;
        margin-right: 20px;
        cursor: pointer;
      }
      .avatar {
        cursor: pointer;
        position: relative;
      }
      .head-info {
        font-size: 18px;
        color: #123456;
        cursor: pointer;
        padding: 0 20px;
        text-align: center;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>